<template>
  <div>
    <Header />
    <div class="measure_ipt">
      <div class="measure_box">
        <p class="measure">量身定制您的贷款方案</p>
        <p class="pay">您买房，我帮您付钱</p>
        <p class="measure_elipt">
          <el-input placeholder="请输入内容" v-model="input2" type="number">
            <template slot="append">万</template>
          </el-input>
          <el-select v-model="value" placeholder="请选择贷款比列(单位%)" class="select">
            <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="profession" placeholder="请选择职业" class="select">
            <el-option v-for="item in options1" :key="item" :label="item" :value="item"></el-option>
          </el-select>
          <el-input placeholder="请输入手机号" v-model="input3" class="ipt1">
            <template slot="append">
              <span v-if="show" @click="OnCode">获取验证码</span>
              <span v-else>{{ second }}s</span>
            </template>
          </el-input>
          <el-input v-model="input" placeholder="请输入验证码"></el-input>
        </p>
        <div>
          <p class="measure_btn" @click="OnapplyLoan">立即申请</p>
        </div>
      </div>
    </div>
    <div class="benefit">
      <div class="benefit_list">
        <img src="../../assets/image/xzd.png" alt class="benefit_img" />
        <div class="benefit_text">
          <p class="benefit_title">快速批贷</p>
          <p class="benefit_details">最快30分钟完成线上批贷</p>
        </div>
      </div>
      <div class="benefit_list">
        <img src="../../assets/image/shk.png" alt class="benefit_img" />
        <div class="benefit_text">
          <p class="benefit_title">品种多样</p>
          <p class="benefit_details">几十种金融服务方案可选</p>
        </div>
      </div>
      <div class="benefit_list">
        <img src="../../assets/image/tglg.png" alt class="benefit_img" />
        <div class="benefit_text">
          <p class="benefit_title">高通过率</p>
          <p class="benefit_details">定制金融方案通过率更高</p>
        </div>
      </div>
      <div class="benefit_list">
        <img src="../../assets/image/zsfw.png" alt class="benefit_img" />
        <div class="benefit_text">
          <p class="benefit_title">专属服务</p>
          <p class="benefit_details">全程专业金融服务人员陪同</p>
        </div>
      </div>
    </div>
    <div class="demand">
      <p class="demand_title">贷款需求</p>
      <p class="demand_label">Loan demand</p>
      <div class="demand_list">
        <p class="demand_text">
          <img src="../../assets/img/gedk.png" alt />
          高额房贷
        </p>
        <p class="demand_detail">产品利率：0.45%-0.75% ；房贷额度：500-1000万；贷款期限： 5-30年</p>
      </div>
      <div class="demand_list">
        <p class="demand_text">
          <img src="../../assets/img/ksd.png" alt />
          快速贷
        </p>
        <p class="demand_detail">产品利率：0.45%-0.75% ；房贷额度：1-50万；放款时间： 1-50万</p>
      </div>
      <div class="demand_list">
        <p class="demand_text">
          <img src="../../assets/img/dlldk.png" alt />
          低利率贷款
        </p>
        <p class="demand_detail">产品利率：0.30%-1.50% ；房贷额度：1-100万；贷款期限： 1-3年</p>
      </div>
      <div class="demand_list">
        <p class="demand_text">
          <img src="../../assets/img/dmkdk.png" alt />
          低门槛贷款
        </p>
        <p class="demand_detail">产品利率：0.60%-1.50% ；房贷额度：20-1000万；贷款期限： 1-3年</p>
      </div>
    </div>
    <div class="qualifications">
      <div class="demand_conter">
        <div>
          <p class="demand_title">贷款资质</p>
          <p class="demand_label">Loan qualification</p>
        </div>
        <div class="swiper">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#F5643E">
            <van-swipe-item v-for="(item,index) in list" :key="index" class="swipe_list">
              <div class="swipe_img">
                <p class="swipe_text">{{item.text}}</p>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
    <div class="flow">
      <div class="demand_conter">
        <div>
          <p class="demand_title font">贷款流程</p>
          <p class="demand_label">Loan process</p>
        </div>
        <div class="flow_box">
          <div class="flow_conter">
            <p class="flow_text">提交申请</p>
            <p class="flow_title">了解详情</p>
          </div>
          <div class="flow_conter">
            <p class="flow_text">审核资料</p>
            <p class="flow_title">15分钟在线审核资料</p>
          </div>
          <div class="flow_conter">
            <p class="flow_text">方案制定</p>
            <p class="flow_title">客户经理1v1服务</p>
          </div>
          <div class="flow_conter">
            <p class="flow_text">签订合同</p>
            <p class="flow_title">不成功不收费</p>
          </div>
          <div class="flow_conter">
            <p class="flow_text">资金发放</p>
            <p class="flow_title">最快一天放款</p>
          </div>
        </div>
      </div>
    </div>
    <div class="partner">
      <div class="demand_conter">
        <div>
          <p class="demand_title font">合作伙伴</p>
          <p class="demand_label">cooperative partne</p>
        </div>
        <div class="partner_box">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#F5643E">
            <van-swipe-item v-for="(item,index) in 1" :key="index" class="partner_list">
              <img src="../../assets/image/t1.png" alt class="swiper_img" />
              <img src="../../assets/image/t2.png" alt class="swiper_img" />
              <img src="../../assets/image/t3.png" alt class="swiper_img" />
              <img src="../../assets/image/t4.png" alt class="swiper_img" />
              <img src="../../assets/image/t5.png" alt class="swiper_img" />
              <img src="../../assets/image/t6.png" alt class="swiper_img" />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import rem from "@/assets/js/rem.js";
import Header from "@/components/m_file/header.vue";
import Footer from "@/components/m_file/footer.vue";
export default {
  data() {
    return {
      input3: "",
      input2: "",
      value: "",
      input: "",
      profession: "",
      verifyCode: "",
      show: true,
      timer: null,
      second: 60,
      options: ["10", "20", "30", "40", "50", "60", "70", "80", "90", "100"],
      options1: ["个体户", "企业白领", "企业法人", "自由工作者"],

      list: [
        { text: "手里没有资金，也想要一套属于自己房子的刚需一族" },
        { text: "手里没有资金，也想要一套属于自己房子的刚需一族" }
      ]
    };
  },
  mounted() {},
  methods: {
    OnCode() {
      this.show = false;
      this.timer = setInterval(() => {
        if (this.second > 0) {
          this.second--;
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
      if (this.input3.length >= "11") {
        this.instance
          .getVerifyCode({
            id: this.input3
          })
          .then(res => {
            if (res.data.code == 0) {
              this.verifyCode = res.data.data;
            } else {
              clearInterval(this.timer);
              this.timer = null;
              this.show = true;
              this.second = 60;
            }
            this.$notify({
              message: res.data.msg,
              duration: 2000
            });
          })
          .catch(function(error) {});
      }
    },
    OnapplyLoan() {
      if (this.input3 == "" && this.input3.length == 11) {
        this.$notify({
          message: "请输入正确的手机号码",
          duration: 2000
        });
      } else {
        if (this.input == this.verifyCode && this.input != "") {
          this.instance
            .applyLoan({
              houseTotalAmount: this.input2,
              loanRatio: this.value,
              profession: this.profession,
              telephone: this.input3,
              verifyCode: this.input
            })
            .then(res => {
              if (res.data.code == 0) {
                this.$notify({
                  message:
                    "您已经成功提交贷款信息，稍后会有客服人员与您联系，请保持手机畅通",
                  duration: 2000
                });
              } else {
                this.$notify({
                  message: res.data.msg,
                  duration: 2000
                });
              }
            })
            .catch(function(error) {});
        } else {
          this.$notify({
            message: "请正确输入验证码",
            duration: 2000
          });
        }
      }
    }
  },
  components: {
    Header,
    Footer
  }
};
</script>
<style lang="less" scoped>
.demand_title {
  font-size: 0.18rem;
  font-weight: bold;
  padding-top: 0.25rem;
  color: #333333;
  text-align: center;
}
.demand_label {
  font-size: 0.1rem;
  color: #999999;
  text-align: center;
  margin-bottom: 0.15rem;
}
.measure_ipt {
  background: url("~@/assets/image/fpdkbg.png") top center no-repeat;
  background-size: 100%;
  padding: 0.8rem 0 0.33rem 0;
  .measure_box {
    width: 3rem;
    height: 4.18rem;
    background: #ffffff;
    border-radius: 10px;
    margin: 0 auto;
    padding: 0 0.135rem;
  }
  .measure {
    text-align: center;
    font-size: 0.15rem;
    font-weight: bold;
    color: #3d3b3a;
    padding-top: 0.25rem;
    margin-bottom: 0.08rem;
  }
  .pay {
    text-align: center;
    font-size: 0.1rem;
    color: #f0623c;
    margin-bottom: 0.16rem;
  }
  .measure_elipt {
    .el-input {
      display: table;
      margin-bottom: 0.1rem;
    }
    .el-select {
      display: block;
      margin-bottom: 0.1rem;
    }
    .ipt1 {
      .el-input-group__append {
        background: #f5643e;
      }
    }
  }
  .conter_left > div {
    height: 0.6rem;
  }
  .measure_btn {
    height: 0.44rem;
    background: #f5643e;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    text-align: center;
    line-height: 0.44rem;
    font-size: 0.17rem;
    color: #ffffff;
  }
  .measure_elipt {
    position: relative;
  }
}
.benefit {
  padding-bottom: 0.27rem;
  .benefit_list {
    overflow: hidden;
    margin: 0.28rem 0 0 0.31rem;
    .benefit_img {
      float: left;
      width: 0.23rem;
      height: 0.23rem;
      margin-right: 0.25rem;
      margin-top: 0.1rem;
    }
    .benefit_text {
      float: left;
      .benefit_title {
        font-size: 0.15rem;
        color: #333333;
        margin-bottom: 0.1rem;
      }
      .benefit_details {
        font-size: 0.12rem;
        color: #999999;
      }
    }
  }
}
.demand {
  background: #f8f8f8;
  padding: 0.21rem 0;
  .demand_title {
    font-size: 0.18rem;
    font-weight: bold;
    color: #333333;
    text-align: center;
  }
  .demand_label {
    font-size: 0.1rem;
    color: #999999;
    text-align: center;
  }
  .demand_list {
    padding: 0.21rem 0 0 0.12rem;
    width: 3.24rem;
    height: 0.94rem;
    background: #ffffff;
    border-radius: 10px;
    margin: 0.1rem auto;
    .demand_text {
      font-size: 0.15rem;
      color: #222222;
      margin-bottom: 0.145rem;
      img {
        width: 0.16rem;
        height: 0.16rem;
        margin-right: 0.09rem;
      }
    }
    .demand_detail {
      font-size: 0.11rem;
      color: #666666;
    }
  }
}
.swipe_list {
  padding: 0.15rem 0 0.33rem 0;
  .swipe_img {
    width: 3.45rem;
    height: 1.54rem;
    background: #f5643e;
    border-radius: 10px;
    margin: 0 auto;
    background: url("~@/assets/image/dkzzbg.png") no-repeat;
    background-size: 100%;
    .swipe_text {
      font-size: 0.12rem;
      color: #ffffff;
      text-align: center;
      padding-top: 0.9rem;
    }
  }
}
.flow {
  background: url("~@/assets/image/dklcbg.png") no-repeat;
  background-size: 100%;
  .font {
    color: #ffffff;
  }
  .flow_box {
    height: 4rem;
    .flow_conter {
      // padding-bottom: 0.38rem;
      height: 20%;
      margin-left: 1.07rem;
      .flow_text {
        font-size: 0.15rem;
        color: #ffffff;
        margin-bottom: 0.09rem;
      }
      .flow_title {
        font-size: 0.12rem;
        color: #e5dfdf;
      }
    }
  }
}
.partner_box {
  .partner_list {
    img {
      float: left;
      height: 50%;
      width: 28%;
      margin: 0 0.07rem 0.28rem 0.07rem;
    }
  }
}
</style>
<style scoped>
.el-select > .el-input {
  width: 310px;
}
</style>
